<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-08-25 18:36:02
 * @Description: 灌溉面积遥感动态监测系统
-->
<template>
  <el-row>
    <el-col
      :span="24"
      class="paltform-container"
      :style="`height:${view.height}px`"
    >
      <!-- 标题头部 -->
      <div class="header">
        <div class="tit-warp">
          <span class="tit-name">灌区灌溉遥感动态监测系统</span>
        </div>
      </div>

      <!-- 导航按钮 -->
      <div class="tab-container">
        <div class="tab-box left-box">
          <div class="custom-button-warp">
            <div class="custom-button" @click="MPDIhandler">
              土含与蒸散发反演
            </div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button active" @click="buttonHandler(3)">
              灌溉面积监测
            </div>
          </div>
        </div>
        <div class="tab-box middle-box"></div>
        <div class="tab-box right-box">
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(6)">灌溉水量监测</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(4)">多要素联合模拟</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(5)">耗水过程解析</div>
          </div>
        </div>
      </div>

      <!-- 灌溉面积监测成果列表面板 -->
      <div class="soil-et-panel" v-show="showDataPanel">
        <el-card class="data-card">
          <template #header>
            <div class="data-panel-header">
              <span>灌溉面积监测成果</span>
              <el-button
                link
                @click="showDataPanel = false"
                :icon="Close"
                size="small"
              ></el-button>
            </div>
          </template>

          <!-- 筛选条件 -->
          <div class="filter-section">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-select
                  v-model="queryParams.irrigationArea"
                  placeholder="选择灌区"
                  size="small"
                  clearable
                  @change="loadData"
                >
                  <el-option label="石津灌区" value="石津灌区"></el-option>
                  <el-option label="河套灌区" value="河套灌区"></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  size="small"
                  style="width: 100%"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateChange"
                />
              </el-col>
            </el-row>
          </div>

          <div class="results-container">
            <!-- 数据列表 -->
            <el-table
              :data="dataList"
              v-loading="loading"
              size="small"
              height="380"
              @row-click="handleRowClick"
              style="width: 100%"
              highlight-current-row
            >
              <el-table-column
                prop="fileName"
                label="文件名称"
                min-width="140"
              >
                <template #default="{ row }">
                  <el-tooltip :content="row.fileName" placement="top">
                    <span class="text-overflow">{{ row.fileName }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="monitorDate"
                label="监测日期"
                width="100"
                :formatter="dateFormatter"
              />
              <el-table-column
                prop="irrigationArea"
                label="灌区"
                width="90"
              >
                <template #default="{ row }">
                  <el-tag size="small" type="primary">{{
                    row.irrigationArea
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                width="100"
                :formatter="dateFormatter"
              />
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.stop="viewOnMap(row)"
                  >
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="queryParams.page"
                v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50]"
                :total="total"
                layout="total, sizes, prev, pager, next"
                small
                @size-change="loadData"
                @current-change="loadData"
              />
            </div>
          </div>
        </el-card>
      </div>

      <!-- CSV数据展示对话框 -->
      <el-dialog
        v-model="csvDialogVisible"
        :title="csvDialogTitle"
        width="90%"
        top="5vh"
        class="csv-dialog"
        :before-close="handleCsvDialogClose"
      >
        <div class="csv-content-container">
          <!-- CSV文件信息 -->
          <div class="csv-info-section" v-if="csvContent.fileInfo">
            <el-descriptions :column="4" border size="small">
              <el-descriptions-item label="文件名">
                {{ csvContent.fileInfo.originalName }}
              </el-descriptions-item>
            <!--   <el-descriptions-item label="文件大小">
                {{ formatFileSize(csvContent.fileInfo.fileSize) }}
              </el-descriptions-item> -->
              <el-descriptions-item label="创建时间">
                {{ formatDate(csvContent.fileInfo.createTime) }}
              </el-descriptions-item>
              <el-descriptions-item label="总行数">
                {{ csvContent.pagination?.total || 0 }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- CSV数据表格 -->
          <div class="csv-table-section">
            <el-table
              :data="csvContent.data"
              v-loading="csvLoading"
              border
              size="small"
              height="800"
              style="width: 100%"
            >
              <el-table-column
                v-for="header in csvContent.headers"
                :key="header"
                :prop="header"
                :label="header"
                :width="getColumnWidth(header)"
                show-overflow-tooltip
              >
                <template #default="{ row }">
                  <span>{{ formatCellValue(row[header]) }}</span>
                </template>
              </el-table-column>
            </el-table>

            <!-- CSV分页 -->
            <div class="csv-pagination-container">
              <el-pagination
                v-model:current-page="csvPagination.page"
                v-model:page-size="csvPagination.pageSize"
                :page-sizes="[50, 100, 200, 500]"
                :total="csvContent.pagination?.total || 0"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleCsvPageSizeChange"
                @current-change="handleCsvPageChange"
              />
            </div>
          </div>
        </div>

        <template #footer>
          <div class="dialog-footer">
          <!--   <el-button @click="exportCsvData" type="primary">
              导出数据
            </el-button> -->
            <el-button @click="csvDialogVisible = false">
              关闭
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 数据面板切换按钮 -->
      <div class="data-panel-toggle" @click="showDataPanel = !showDataPanel">
        <el-icon><List /></el-icon>
        <span>灌溉面积</span>
      </div>

      <!-- 地图容器 -->
      <div id="map-container" :style="`height:${view.height}px`"></div>

      <!-- 鼠标位置显示 -->
      <div id="mouse-position" class="position_coordinate"></div>

      <!-- 底图选择面板 -->
      <div style="position: relative">
        <el-card
          v-show="editBoard"
          style="max-width: 480px"
          class="edit-container"
        >
          <div class="tool-body">
            <el-card class="base-layer-card" size="small">
              <template #header>
                <div class="base-layer-header">
                  <span>底图选择</span>
                  <el-button
                    link
                    class="button"
                    @click="editBoard = false"
                    :icon="Close"
                  ></el-button>
                </div>
              </template>
              <div class="base-layer-container">
                <el-card
                  :class="`${currentBaseLayer == layer.type ? 'active' : ''}`"
                  v-for="layer in baseLayers"
                  :key="layer.type"
                  :body-style="{ padding: '0px' }"
                  class="img-card"
                  @click="baseImageClickHandler(layer)"
                >
                  <el-image
                    style="width: 74px; height: 54px"
                    :src="layer.img"
                    :fit="'fill'"
                  />
                  <div style="padding: 5px">
                    <span>{{ layer.name }}</span>
                  </div>
                </el-card>
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { Close, List } from "@element-plus/icons-vue";
import { Map, View } from "ol";
import { Tile as TileLayer, Image } from "ol/layer";
import { WMTS, ImageWMS , TileWMS} from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get, fromLonLat } from "ol/proj";
import MousePosition from "ol/control/MousePosition";
import { format as formatAxirs } from "ol/coordinate";
import "ol/ol.css";
import { ScaleLine, defaults as defaultControls } from "ol/control";
import { getWidth, getTopLeft } from "ol/extent";
import baseImg1 from "@/assets/img/vec.jpg";
import baseImg2 from "@/assets/img/img.jpg";
import baseImg3 from "@/assets/img/ter.jpg";
import config from "@/config/config";
import router from "@/router";
import { ElMessage } from "element-plus";
import axios from "axios";

// 地图相关变量
let map;
const resolutions = [];
const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;

// 初始化分辨率
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

// 响应式数据
const editBoard = ref(true);
const currentBaseLayer = ref("imgLayer");
const currentTypeLayer = ref("GF1_WFV0829_origin_1");
const currentProduct = ref({
  id: 67,
  productName: "S2L2A_20240530",
  satelliteType: "S2L2A",
  produceDate: "2024-05-29T16:00:00.000Z",
  box: '["107.40580930435281","40.50844975902888","108.75382121970257","41.529295247902304"]',
});

// 数据面板相关
const showDataPanel = ref(false);
const loading = ref(false);
const dataList = ref([]);
const total = ref(0);
const dateRange = ref([]);

// CSV数据展示相关
const csvDialogVisible = ref(false);
const csvDialogTitle = ref("CSV数据查看");
const csvLoading = ref(false);
const csvContent = ref({
  fileInfo: null,
  headers: [],
  data: [],
  pagination: {
    page: 1,
    pageSize: 100,
    total: 0,
    totalPages: 0
  }
});

// CSV分页参数
const csvPagination = reactive({
  page: 1,
  pageSize: 100
});

// 查询参数
const queryParams = reactive({
  page: 1,
  pageSize: 20,
  irrigationArea: "",
  resultType: "灌溉面积监测",
  startDate: "",
  endDate: "",
});

// 底图配置
const baseLayers = [
  {
    type: "vecLayer",
    name: "矢量底图",
    img: baseImg1,
  },
  {
    type: "imgLayer",
    name: "影像底图",
    img: baseImg2,
  },
  {
    type: "terLayer",
    name: "地形晕渲",
    img: baseImg3,
  },
];

// 视图高度
const view = reactive({
  height: window.innerHeight,
});

// API基础URL
const API_BASE_URL = "/algorithmApi/api/detection-results";

// 加载灌溉面积监测数据
const loadData = async () => {
  loading.value = true;
  try {
    const params = {
      ...queryParams,
    };

    const response = await axios.get(`${API_BASE_URL}/soil-et`, { params });

    if (response.data.code === 200) {
      dataList.value = response.data.data.list || [];
      total.value = response.data.data.total || 0;
    } else {
      ElMessage.error(response.data.message || "数据加载失败");
    }
  } catch (error) {
    console.error("加载数据失败:", error);
    ElMessage.error("网络错误，请稍后重试");

    // 添加模拟数据以便测试
    dataList.value = [
      {
        id: 1,
        fileName: "S2L2A_20240530_灌溉面积监测.csv",
        monitorDate: "2024-05-30",
        irrigationArea: "石津灌区",
        resultType: "灌溉面积监测",
        box: "[107.40580930435281,40.50844975902888,108.75382121970257,41.529295247902304]",
        createTime: "2024-05-30",
        csvFileId: "csv-001" // 添加CSV文件ID
      },
      {
        id: 2,
        fileName: "S2L2A_20240528_灌溉面积监测.csv",
        monitorDate: "2024-05-28",
        irrigationArea: "河套灌区",
        resultType: "灌溉面积监测",
        box: "[107.40580930435281,40.50844975902888,108.75382121970257,41.529295247902304]",
        createTime: "2024-05-28",
        csvFileId: "csv-002" // 添加CSV文件ID
      },
    ];
    total.value = 2;
  } finally {
    loading.value = false;
  }
};

// 加载CSV数据
const loadCsvData = async (csvFileId: string, page: number = 1, pageSize: number = 100) => {
  csvLoading.value = true;
  try {
    const response = await axios.get(`${API_BASE_URL}/csv/${csvFileId}/content`, {
      params: { page, pageSize }
    });

    if (response.data.code === 200) {
      csvContent.value = response.data.data;
      csvPagination.page = page;
      csvPagination.pageSize = pageSize;
    } else {
      ElMessage.error(response.data.message || "CSV数据加载失败");
      // 模拟数据
      csvContent.value = {
        fileInfo: {
          id: csvFileId,
          originalName: "S2L2A_20240530_灌溉面积监测.csv",
          fileSize: 1024576,
          createTime: new Date("2024-05-30")
        },
        headers: ["区域ID", "经度", "纬度", "灌溉面积(亩)", "植被指数", "土壤湿度", "监测时间"],
        data: [
          {
            "区域ID": "A001",
            "经度": 107.4058,
            "纬度": 40.5084,
            "灌溉面积(亩)": 120.5,
            "植被指数": 0.75,
            "土壤湿度": 0.68,
            "监测时间": "2024-05-30 10:00"
          },
          {
            "区域ID": "A002",
            "经度": 107.4158,
            "纬度": 40.5184,
            "灌溉面积(亩)": 95.2,
            "植被指数": 0.72,
            "土壤湿度": 0.65,
            "监测时间": "2024-05-30 10:15"
          },
          {
            "区域ID": "A003",
            "经度": 107.4258,
            "纬度": 40.5284,
            "灌溉面积(亩)": 155.8,
            "植被指数": 0.78,
            "土壤湿度": 0.72,
            "监测时间": "2024-05-30 10:30"
          }
        ],
        pagination: {
          page: page,
          pageSize: pageSize,
          total: 150,
          totalPages: Math.ceil(150 / pageSize)
        }
      };
    }
  } catch (error) {
    console.error("加载CSV数据失败:", error);
    ElMessage.error("网络错误，请稍后重试");
  } finally {
    csvLoading.value = false;
  }
};

// 查看CSV数据
const viewCsvData = async (row) => {
  csvDialogTitle.value = `${row.fileName} - 用水效率统计数据查看`;
  csvDialogVisible.value = true;
  
  // 重置分页
  csvPagination.page = 1;
  csvPagination.pageSize = 100;
  
  // 加载CSV数据
  await loadCsvData(row.csvFileId || row.id, csvPagination.page, csvPagination.pageSize);
};

// CSV分页处理
const handleCsvPageChange = (page: number) => {
  if (csvContent.value.fileInfo) {
    loadCsvData(csvContent.value.fileInfo.id, page, csvPagination.pageSize);
  }
};

const handleCsvPageSizeChange = (pageSize: number) => {
  csvPagination.page = 1;
  if (csvContent.value.fileInfo) {
    loadCsvData(csvContent.value.fileInfo.id, 1, pageSize);
  }
};

// 关闭CSV对话框
const handleCsvDialogClose = (done) => {
  csvContent.value = {
    fileInfo: null,
    headers: [],
    data: [],
    pagination: {
      page: 1,
      pageSize: 100,
      total: 0,
      totalPages: 0
    }
  };
  done();
};

// 导出CSV数据
const exportCsvData = () => {
  ElMessage.info("导出功能开发中...");
  // 这里可以实现CSV导出功能
};

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 格式化日期
const formatDate = (date: Date | string) => {
  if (!date) return "-";
  return new Date(date).toLocaleString("zh-CN");
};

// 获取列宽度
const getColumnWidth = (header: string) => {
  const headerLength = header.length;
  if (headerLength > 10) return 150;
  if (headerLength > 6) return 120;
  return 100;
};

// 格式化单元格值
const formatCellValue = (value: any) => {
  if (value === null || value === undefined) return "";
  if (typeof value === "number") {
    return value.toFixed(2);
  }
  return String(value);
};

// 处理日期范围变化
const handleDateChange = (dates) => {
  if (dates && dates.length === 2) {
    queryParams.startDate = dates[0];
    queryParams.endDate = dates[1];
  } else {
    queryParams.startDate = "";
    queryParams.endDate = "";
  }
  queryParams.page = 1;
  loadData();
};

// 日期格式化
const dateFormatter = (row, column, cellValue) => {
  if (!cellValue) return "-";
  return new Date(cellValue).toLocaleDateString("zh-CN");
};

// 表格行点击
const handleRowClick = (row) => {
  console.log("选中行:", row);
  // 自动在地图上定位
  viewOnMap(row);
};

// 在地图上查看
const viewOnMap = (row) => {
  try {
    if (row.box) {
      const box = JSON.parse(row.box);
      if (map && Array.isArray(box) && box.length === 4) {
        map.getView().fit(box.map(Number), {
          constrainResolution: false,
          padding: [20, 20, 20, 20],
        });
        ElMessage.success(`正在查看: ${row.fileName}`);

        var newLayer = new TileLayer({
          // 新的 WMS 图层
          source: new TileWMS({
            url: config.geoserver_base_url + "/geoserver/result/wms", // GeoServer的WMS服务URL
            params: {
              LAYERS: "result:" + row.fileName,
              VERSION: "1.1.0",
              FORMAT: "image/png", // 图像格式为 PNG
            },
            serverType: "geoserver",
          }),
        });
        newLayer.set("name", "baseLayer");
        map.getLayers().setAt(3, newLayer); // 替换第二个图层（索引为 1）
      }
    } else {
      ElMessage.warning("该数据没有坐标信息");
    }
  } catch (error) {
    console.error("解析坐标失败:", error);
    ElMessage.error("坐标数据格式错误");
  }
};

// 初始化地图
const initMap = function () {
  const TIANDI_KEY = "eec7fae87888db2dc4c30c0c458fb66b";
  const matrixSet = "c";

  // WMS图层
  const wmsLayers = new Image({
    source: new ImageWMS({
      url: config.geoserver_base_url + "/geoserver/result/wms",
      params: {
        LAYERS: "result:" + currentTypeLayer.value,
        VERSION: "1.1.0",
        FORMAT: "image/png",
      },
      serverType: "geoserver",
    }),
  });
  wmsLayers.set("name", "baseLayer");
  wmsLayers.setOpacity(1);

  // 地形图层
  const terLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/ter_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "ter",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  terLayer.set("name", "terLayer");

  // 影像图层
  const imgLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/img_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "img",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  imgLayer.set("name", "imgLayer");

  // 矢量图层
  const vecLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/vec_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "vec",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  vecLayer.set("name", "vecLayer");

  // 注记图层
  const cvaLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/cva_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "cva",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  cvaLayer.set("name", "cvaLayer");

  // 创建地图
  map = new Map({
    target: "map-container",
    layers: [terLayer, vecLayer, imgLayer, wmsLayers, cvaLayer],
    view: new View({
      projection: projection,
    }),
    controls: defaultControls({
      attribution: true,
      zoom: false,
      rotate: true,
    }).extend([]),
  });

  // 设置地图视图
  map.getView().fit(JSON.parse(currentProduct.value.box), {
    constrainResolution: false,
  });

  // 鼠标位置控件
  const mousePositionControl = new MousePosition({
    coordinateFormat: function (coordinate) {
      return formatAxirs(coordinate, "经度:{x} 纬度:{y}", 2);
    },
    projection: "EPSG:4326",
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"),
  });
  map.addControl(mousePositionControl);

  // 比例尺控件
  const scaleLine = new ScaleLine({
    units: "metric",
  });
  map.addControl(scaleLine);
};

// 底图切换
const baseImageClickHandler = function (layer) {
  switchBaseLayer(layer.type);
  currentBaseLayer.value = layer.type;
};

const switchBaseLayer = (layerType) => {
  if (!map) return;
  map.getLayers().forEach((layer) => {
    if (
      layer.values_.name == layerType ||
      layer.values_.name == "baseLayer" ||
      layer.values_.name == "cvaLayer"
    ) {
      layer.setVisible(true);
    } else {
      layer.setVisible(false);
    }
  });
};

// 导航按钮处理
const dataManageHandler = function () {
  router.push("/bigScreen2/11");
};

const MPDIhandler = function () {
  router.push("/bigScreen/11");
};

const buttonHandler = function (num) {
  router.push(`/bigScreen${num}/11`);
};

// 组件挂载
onMounted(() => {
  setTimeout(() => {
    initMap();
    // 初始加载数据
    loadData();
  }, 2000);
});
</script>

<style lang="scss" scoped>
.paltform-container {
  position: relative;
}

.header {
  background: url("@/assets/bigScreen/img/title_back.png") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 114px;
  display: flex;
  position: relative;
  justify-content: space-between;
  background-position: 0px -13px;
  z-index: 200;

  .tit-warp {
    position: relative;
    top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;

    .tit-name {
      font-size: 28px;
      color: #d1e5ff;
      line-height: 30px;
      text-shadow: 1px 2px 0px rgba(95, 129, 151, 0.47),
        2px 4px 2px rgba(58, 99, 137, 0.15), 4px 10px 18px rgba(27, 41, 60, 0.5);
      -webkit-text-stroke: 1px #eff5ff;
      -webkit-text-fill-color: transparent;
    }
  }
}

.tab-container {
  width: 100%;
  position: absolute;
  display: flex;
  top: 20px;
  z-index: 210;

  .tab-box {
    .custom-button {
      flex: 1;
      text-align: center;
      display: inline-block;
      width: 203px;
      height: 88px;
      line-height: 70px;
      font-weight: bold;
      font-size: 16px;
      text-shadow: 8px 11px 1px rgba(145, 199, 255, 0.05),
        18px 38px 32px rgba(0, 0, 0, 0.24);
      font-style: italic;
      background: url("@/assets/bigScreen/img/tab_button.png") no-repeat;
      color: #c1f5ff;
      background-position: 0px -10px;
      cursor: pointer;

      &:hover {
        background: url("@/assets/bigScreen/img/tab_button_active.png")
          no-repeat;
        background-position: 0px -10px;
      }
    }

    .active {
      background: url("@/assets/bigScreen/img/tab_button_active.png") no-repeat;
      background-position: 0px -10px;
    }
  }

  .left-box {
    flex: 0.35;
    display: flex;
  }

  .middle-box {
    flex: 0.3;
  }

  .right-box {
    flex: 0.35;
    display: flex;
  }
}

// 灌溉面积监测面板样式
.soil-et-panel {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 550px;
  z-index: 220;

  .data-card {
    background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
    border: 1px solid rgba(86, 163, 240, 0.3);
    box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);

    .data-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #d1e5ff;
      font-size: 16px;
      font-weight: bold;
    }

    .filter-section {
      margin-bottom: 15px;
    }

    .results-container {
      .text-overflow {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .pagination-container {
        margin-top: 15px;
        text-align: center;
      }
    }
  }
}

.data-panel-toggle {
  position: absolute;
  top: 120px;
  left: 20px;
  z-index: 215;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
  color: #d1e5ff;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(86, 163, 240, 0.3);
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(0deg, #1a3a52, rgba(26, 58, 82, 0.9));
    border-color: rgba(86, 163, 240, 0.6);
  }
}

// CSV数据展示相关样式
.csv-content-container {
  .csv-info-section {
    margin-bottom: 20px;
  }

  .csv-table-section {
    .csv-pagination-container {
      margin-top: 15px;
      text-align: center;
    }
  }
}

#map-container {
  width: 100%;
  height: 600px;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 10;
}

.position_coordinate {
  position: absolute;
  font-size: 14px;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  padding: 5px 10px;
  z-index: 110;
}

.base-layer-card {
  background: none;

  .base-layer-header {
    display: flex;
    justify-content: space-between;
  }

  .base-layer-container {
    display: flex;
    justify-content: space-between;

    .active {
      border: 2px solid #56a3f0;
    }
  }

  .img-card {
    border: 2px solid hsla(210, 96%, 54%, 0);
    cursor: pointer;

    &:hover {
      border: 2px solid #4685c4;
    }
  }
}
</style>

<style lang="scss">
.edit-container {
  z-index: 100;
  position: absolute;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  border-radius: 3px;
  right: 34px;
  top: 50px;
  width: 300px;

  .tool-body {
    & > .el-card {
      border: none !important;

      .el-card.is-always-shadow {
        box-shadow: none !important;
      }
    }

    .base-layer-card.is-always-shadow {
      box-shadow: none !important;
    }
  }
}

.base-layer-card {
  .el-card__header {
    padding: 5px !important;
  }

  .el-card__body {
    padding: 15px;
  }

  .el-card__footer {
    padding: 5px !important;
  }
}

// 灌溉面积监测面板深度样式
.soil-et-panel {
  .el-card {
    border: 1px solid rgba(86, 163, 240, 0.3) !important;

    .el-card__header {
      background: rgba(11, 40, 59, 0.8);
      border-bottom: 1px solid rgba(86, 163, 240, 0.2);
      padding: 10px 15px !important;
    }

    .el-card__body {
      background: rgba(21, 30, 40, 0.95);
      padding: 15px !important;
    }
  }

  // 表格样式
  .el-table {
    background: transparent !important;

    .el-table__header-wrapper {
      .el-table__header {
        background: rgba(11, 40, 59, 0.8) !important;

        th {
          background: transparent !important;
          border-bottom: 1px solid rgba(86, 163, 240, 0.2) !important;
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__body {
        background: transparent !important;

        tr {
          background: transparent !important;

          &:hover {
            background: rgba(86, 163, 240, 0.1) !important;
          }

          &.current-row {
            background: rgba(86, 163, 240, 0.2) !important;
          }

          td {
            background: transparent !important;
            
            border-bottom: 1px solid rgba(86, 163, 240, 0.1) !important;
          }
        }
      }
    }
  }

  // 分页样式
  .el-pagination {
    background: transparent !important;

    .btn-prev,
    .btn-next,
    .el-pager li {
      background: rgba(11, 40, 59, 0.8) !important;
      color: #d1e5ff !important;
      border: 1px solid rgba(86, 163, 240, 0.3) !important;

      &:hover {
        background: rgba(86, 163, 240, 0.3) !important;
      }

      &.is-active {
        background: #56a3f0 !important;
        color: #fff !important;
      }
    }

    .el-select {
      .el-input__wrapper {
        background: rgba(11, 40, 59, 0.8) !important;
        border: 1px solid rgba(86, 163, 240, 0.3) !important;
        color: #d1e5ff !important;
      }
    }
  }

  // 筛选条件样式
  .filter-section {
    .el-select,
    .el-date-editor {
      .el-input__wrapper {
        background: rgba(11, 40, 59, 0.8) !important;
        border: 1px solid rgba(86, 163, 240, 0.3) !important;
        color: #d1e5ff !important;

        .el-input__inner {
          color: #d1e5ff !important;
        }
      }
    }
  }
}

// CSV对话框样式
.csv-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e6e8eb;
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e6e8eb;
    padding: 15px 20px;
  }
}
</style>